<template>
    <view class="step-complete">
        <view class="select-pet-type">
            <i-lottie
                ref="welcome"
                :height="300"
                :width="300"
                loop
                @ready="onLottieReady"
                @done="onDone"
                :animation-data="animationData"
            />
        </view>
        <view class="buttons">
            <i-button type="primary" plain @click="onPerfect">完善信息</i-button>
            <i-button type="primary" @click="onDone">完成啦！</i-button>
        </view>
    </view>
</template>

<script setup lang="ts">
import animationData from "@/assets/lotties/Happy_Unicorn_Dog.json";

/**
 * 定义组件触发的事件
 * @event next - Lottie 动画播放完成时触发
 */
const emits = defineEmits(["done", "pre"]);

const welcome = ref();

const onLottieReady = () => {
    welcome.value.play();
};

const onPerfect = () => {
    emits("pre", {
        type: "select-pet-type"
    });
};

const onDone = () => {
    emits("done", {
        type: "select-pet-type"
    });
};
</script>

<style scoped lang="scss">
@import "./index";
</style>
